<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影列表</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>

</head>
<body>
<h2>电影列表</h2>
<div id="box">

</div>
<a id="previous" href="javascript:;">上一页</a>
<a id="next" href="javascript:;">下一页</a>
</body>
<script>
    $(function () {
        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8000/api/movielist",
            // 将获取的localStorage.token添加到请求头
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
    })
    $('#previous').click(function () {
        if (localStorage.previous === 'null') {
            alert('已是第一页！')
            return
        }
        else {
            $.ajax({
            type: 'GET',
            url: localStorage.previous,
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                $('#box').empty()
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
        }

    })
    $('#next').click(function () {
        if (localStorage.next === 'null'){
            alert('已是最后一页！')
            return
        }
        else {
            $.ajax({
            type: 'GET',
            url: localStorage.next,
            headers: {'Authorization': 'Bearer ' + localStorage.token},
            success: function (data) {
                // 获取返回数据内容
                var movies = data.results;
                $('#box').empty()
                // 动态添加数据
                for (var i = 0; i < movies.length; i++) {
                    $('#box').append('<p>' + movies[i].showname + '</p>')
                }
                // 上一页下一页设置
                localStorage.previous = data.previous
                localStorage.next = data.next
            }
        })
        }

    })

</script>
</html>